<template>
  <view class="interflow-home-box">
    <!-- 顶部导航栏 -->
    <u-sticky bgColor="#E95115">
      <view class="navbar">和价网版聊组</view>
      <view class="header">
        <u-row>
          <u-col span="11">
            <view style="margin:0 8px 0 3px;flex: 1;">
              <u-search :show-action="false" @search="handleSearch" v-model="keywords" placeholder="请输入版聊名称"
                :clearabled="true"></u-search>
            </view>
          </u-col>
          <u-col span="1">
            <image class="home-icon" mode="widthFix" src="@/static/interflow/bl-cj.png" @click="hanldeCreatJump"></image>
          </u-col>
        </u-row>
     <!--   <view class="creat-box" v-if="creatShow">
          <view class="creat-operate" @click="hanldeCreatJump">
            <text>新建版聊</text>
          </view>
        </view> -->
      </view>
    </u-sticky>
     <view class="interflow-title">我管理的</view>
    <view class="interflow-list">
      <view class="list-box" :style="{ '--layout-width': 100 / flowData.column - flowData.columnSpace + '%' }"
        v-for="(numVal, index) in flowData.column" :key="numVal">
        <view class="item-box" v-for="(item, j) in flowData[`column_${index + 1}`]" :key="j">
          <view  @click="handleLiist(j,index)">
            <image class="img-tip" :src="item.imgUrl" mode="widthFix" lazy-load />
            <view class="tit-tip multi-line-omit">{{ item.title }}</view>
            <view class="interflow-msg">
              <text>江苏易达</text>
              <image class="interflow-avtor" mode="widthFix" src="@/static/interflow/avtor.png"></image>
            </view>
          </view>
     
        </view>
      </view>
    </view>
 
  </view>
</template>

<script>
  export default {
    components: {

    },
    data() {
      return {
        keywords: "",
        creatShow:false,
        flowData: {
          list: [], // 数据值
          column: 2, // 瀑布列数
          columnSpace: 2 // 瀑布列宽间距
        },
        list:[{id:1,name:"123",children:[{id:2,name:"22222"},{id:4,name:"222222222"}]}]
      };
    },
    //下拉刷新
    onPullDownRefresh() {

    },
    created() {
      /* 初始化每一列的数据 */
      for (let i = 1; i <= this.flowData.column; i++) {
        this.$set(this.flowData, `column_${i}`, []);
      }

    },

    onLoad() {
      /* 数据赋值 */
      this.flowData.list = [{
          imgUrl: "https://www.logosc.cn/uploads/resources/2023/03/17/1679045108_thumb.jpg",
          title: "造价",
          desc: "造价。"
        },
        {
          imgUrl: "https://www.logosc.cn/uploads/resources/2023/03/17/1679044581_thumb.jpg",
          title: "造价",
          desc: "造价"
        },
        {
          imgUrl: "https://www.logosc.cn/uploads/resources/2023/03/17/1679045190_thumb.jpg",
          title: "造价",
          desc: "造价"
        },
       

      ];
      this.$nextTick(() => {
        this.initData(); // 数据初始化
      });
    },
    async onShow() {

    },
    async mounted() {

    },

    methods: {
      handleSearch() {

      },

      initData() {
        const groupList = this.dynamicGrouping(this.flowData.list, this.flowData.column); // 数据动态分组
        groupList.forEach((item, i) => (this.flowData[`column_${i + 1}`] = item));
      },

      dynamicGrouping(data, i) {
        if (i <= 0) return "分组数必须大于0";
        const groups = [];
        for (let j = 0; j < i; j++) {
          groups.push([]);
        }
        for (let k = 0; k < data.length; k++) {
          const groupIndex = k % i;
          groups[groupIndex].push(data[k]);
        }
        return groups;
      },
      
      handleCreateShow(){
        this.creatShow = true
      },
     hanldeCreatJump(){
       this.creatShow = false
       uni.navigateTo({
         url: "/pages/home/create"
       });
     },
     handleLiist(i,index){
       uni.navigateTo({
         url: '/pages/home/list?groupId=' + i
       });
     }
    },
  };
</script>

<style lang="scss">
  .interflow-home-box {
    background: #f6f7f9;
    min-height: 100vh;
    width: 100vw;

    .navbar {
      height: 74px;
      width: 100%;
      background: #E95115;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding-bottom: 10px;
      color: #FFF;

      .navbar-title {
        margin: 0 12px 6px 12px;
      }
    }

    .header {
      padding: 10px;
      background-color: #FFF;
      display: flex;
      align-items: center;
      position: relative;
      .u-row{
        flex: 1;
      }
      .creat-box{
        position: absolute;
        right: 10px;
        background: #606060;
        padding: 5px 15px 5px 15px;
        color: #fff;
        top:50px;
        border-radius: 5px;
        .creat-operate{
          text-align: center;
          padding-bottom: 10px;
          padding-top: 10px;
          &:nth-of-type(1){
            border-bottom: 1px solid #fff;
          }
        }
       
      }
    }

    .home-icon {
      width: 20px;
    }
    .interflow-title{
      background: #fff;
      text-align: center;
      padding: 5px;
      
    }
    .interflow-list {
      display: flex;
      justify-content: space-between;
      padding: 20rpx;
      $borderRadius: 12rpx;

      .list-box {
        width: var(--layout-width);

        .item-box {
          width: 100%;
          padding-bottom: 20rpx;
          margin-bottom: 30rpx;
          border-radius: $borderRadius;
          box-shadow: 0rpx 3rpx 6rpx rgba(0, 46, 37, 0.08);

          .img-tip {
            width: 100%;
            border-radius: $borderRadius $borderRadius 0 0;
          }

          .tit-tip {
            text-align: justify;
            font-size: 30rpx;
            padding: 10rpx 20rpx 0;
            font-weight: 900;
          }

          .desc-tip {
            text-align: justify;
            font-size: 26rpx;
            padding: 5rpx 20rpx 0;
            margin-top: 10rpx;
          }
        }

        .interflow-msg {
          display: flex;
          justify-content: space-between;
          margin: 5px 10px;
          color: #9d9d9d;

          .interflow-avtor {
            width: 40rpx;
          }
        }
      }
    }

    /* 多行省略 */
    .multi-line-omit {
      word-break: break-all; // 允许单词内自动换行，如果一个单词很长的话
      text-overflow: ellipsis; // 溢出用省略号显示
      overflow: hidden; // 超出的文本隐藏
      display: -webkit-box; // 作为弹性伸缩盒子模型显示
      -webkit-line-clamp: 2; // 显示的行
      -webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式--从上到下垂直排列
    }

    /* 单行省略 */
    .one-line-omit {
      width: 100%; // 宽度100%：1vw等于视口宽度的1%；1vh等于视口高度的1%
      white-space: nowrap; // 溢出不换行
      overflow: hidden; // 超出的文本隐藏
      text-overflow: ellipsis; // 溢出用省略号显示
    }
  }
</style>s